<template>
  <div>
    <my-form
      ref="addForm"
      :layout="elRows"
      :model="formModel"
      :form-conf="formConf"
      :btn-conf="formBtnConf"
      class="myLayoutTop"
      @btnClick="formBtnClick"
    >
    </my-form>
  </div>
</template>

<script>
import MyForm from '../../../components/base/myForm'
import { cpKeys } from '../../../components/common/common'

export default {
  name: 'User',
  components: { MyForm },
  layout: 'Admin',
  props: {},
  data() {
    return {
      searchModel: {
        name: null,
        idFmt: null
      },
      searchConf: {
        labelSuffix: null,
        inline: true,
        labelWidth: '1px'
      },
      searchBtnConf: {
        buttons: [{ name: '查询模板', type: 'primary' }]
      },
      formItems: [
        {
          elFormItem: {
            prop: 'name',
            label: '',
            type: 'input',
            placeholder: '请输入模板名称'
          }
        }
      ],
      elRows: [
        {
          elCols: [
            {
              span: 23,
              elFormItem: {
                prop: 'name',
                label: '模板名称',
                type: 'input',
                disabled: true
              }
            }
          ]
        },
        {
          elCols: [
            {
              span: 23,
              elFormItem: {
                prop: 'content',
                label: '模板代码',
                type: 'textarea',
                autosize: { minRows: 3, maxRows: 10 }
              }
            }
          ]
        },
        {
          elCols: [
            {
              span: 23,
              elFormItem: {
                prop: 'input',
                label: '输入数据',
                type: 'textarea',
                autosize: { minRows: 3, maxRows: 10 }
              }
            }
          ]
        },
        {
          elCols: [
            {
              span: 23,
              elFormItem: {
                prop: 'output',
                label: '输出结果',
                placeholder: '',
                type: 'textarea',
                autosize: { minRows: 3, maxRows: 10 }
              }
            }
          ]
        }
      ],
      formModel: {
        idFmt: null,
        name: null,
        content: null,
        input: null,
        output: null
      },
      formConf: {
        labelWidth: '100px',
        rules: {
          input: [
            { required: true, message: '请输入输入数据', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入模板代码', trigger: 'blur' }
          ]
        }
      },
      formBtnConf: {
        buttons: [
          { name: '提交', type: 'primary' },
          { name: '修改模板', type: 'primary' },
          { name: '返回' }
        ]
      },
      routerQuery: null
    }
  },
  mounted() {},
  created() {
    // this.routerQuery = routerParams(this)
    this.routerQuery = this.$route.query
    this.searchModel.name = this.routerQuery.name
    this.searchModel.idFmt = this.routerQuery.idFmt
    this.formModel.idFmt = this.searchModel.idFmt
    this.getInitData(this.routerQuery.idFmt)
  },
  methods: {
    mySearchBtnClick(btnItem) {
      btnItem.loading = true
      this.getInitData(this.searchModel.idFmt)
      btnItem.loading = false
    },
    async formBtnClick(btnItem) {
      try {
        if (btnItem.name === '提交') {
          let validFlag = false
          this.$refs.addForm.$refs.form.validate((valid) => {
            validFlag = valid
          })
          if (validFlag) {
            const params = Object.assign({}, this.formModel)
            btnItem.loading = true
            const data = await this.$axios.post('/enjoy/handle', params)
            this.formModel.output = data.data
            this.$message.success(data.msg)
          }
        } else if (btnItem.name === '返回') {
          this.$router.go(-1)
        } else if (btnItem.name === '修改模板') {
          let validFlag = false
          this.$refs.addForm.$refs.form.validateField('content', (valid) => {
            validFlag = valid === ''
          })
          if (validFlag) {
            const confirm = await this.$confirm(
              '是否确认修改模板？',
              '温馨提示',
              {
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'warning'
              }
            )
            if (confirm) {
              btnItem.loading = true
              await this.$axios.post('/enjoy/update', this.formModel)
              this.$message.success('修改成功')
              this.getInitData(this.formModel.idFmt)
            }
          }
        }
      } catch (e) {
        console.log(e)
      } finally {
        btnItem.loading = false
      }
    },
    async getInitData(idFmt) {
      try {
        if (idFmt == null || idFmt === '') {
          this.$message.success('参数为空')
          return
        }
        const data = await this.$axios.post('/enjoy/selectOne', { idFmt })
        cpKeys(this.formModel, data.data, 'name', 'content')
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style scoped></style>
